<template>
  <div class="container">
    <el-card shadow="always">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-date-picker
            v-model="query.time"
            type="daterange"
            range-separator="至"
            start-placeholder="培训开始日期"
            end-placeholder="培训结束日期"
            clearable
            @change="onDateTime"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="6">
          <el-input
            maxlength="50"
            v-model="query.trainingTheme"
            clearable
            placeholder="请输入培训主题"
          ></el-input>
        </el-col>
        <!-- <el-col :span="4">
          <el-select v-model="value" placeholder="请选择考核结果" clearable>
            <el-option
              v-for="item in options"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-col> -->
        <el-col :span="2">
          <el-button type="primary" @click="getList">查询</el-button>
        </el-col>
      </el-row>
      <rz-height></rz-height>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="trainingTime" label="培训时间">
        </el-table-column>
        <el-table-column prop="trainingTheme" label="培训主题">
        </el-table-column>
        <el-table-column prop="trainerName" label="主讲人"> </el-table-column>
        <el-table-column prop="parTrNumber" label="参培人数(人)">
        </el-table-column>
 <el-table-column prop="trainingDuration" label="培训时长(分钟)">
        </el-table-column>
        <el-table-column prop="examResults" label="考核结果"> </el-table-column>
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="view(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        @pagination="getList"
        :page.sync="query.page"
      />
    </el-card>

    <rz-dialog
      :dialogVisible.sync="dialogVisible"
      :isShowConfirm="false"
      title="查看培训记录"
    >
      <el-form label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="培训主题">
              {{ data.trainingTheme }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训时间">
              {{ data.trainingTime }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="主讲人"> {{ data.trainerName }} </el-form-item>
          </el-col>
          <el-col :span="12">
               <el-form-item label="培训人数">
              {{ data.parTrNumber }}人
            </el-form-item>
         
          </el-col>
        </el-row>


    <el-row>
          <el-col :span="24">

           <el-form-item label="培训人员">
              {{ data.parTrPerson }}
            </el-form-item>
          </el-col>
    </el-row>
        <el-row>
          <el-col :span="12">
          <el-form-item label="考核结果">
              {{ data.examResults }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训时长">
              {{ data.trainingDuration }} 分钟</el-form-item
            >
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="培训内容">
              {{ data.trainingContent }}
            </el-form-item>
          </el-col>
        
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="备注">
              {{ data.remark || "--" }}
            </el-form-item>
          </el-col>
        </el-row>
             <el-form-item label="培训照片">
              <el-image
                v-for="(index, item) in data.urllist"
                :key="item"
                style="width: 150px; height: 150px"
                :src="index"
                fit="fill"
                :preview-src-list="data.urllist"
              ></el-image>
            </el-form-item>
      </el-form>
    </rz-dialog>
  </div>
</template>
<script>
//
import { QueryUnitTraningRecordList } from "@/api/modules/enterprise";
export default {
  // props:[],
  // 页面加载
  created() {
    this.getList();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      //   options: ["合格", "不需要考核"],
      query: {
        enddate: "",
        isPage: 0,
        page: 1,
        pageSize: 10,
        startdate: "",
        trainerName: "",
        trainingDuration: 0,
        trainingTheme: "",
        unitId: sessionStorage.getItem("interpretation"),
        time: "",
      },
      tableData: [],
      total: 0,
      dialogVisible: false,
      data: {},
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
    };
  },
  // 方法
  methods: {
    getList() {
      QueryUnitTraningRecordList(this.query).then((res) => {
            res.data.forEach(x=> {
           for (const key in x) {
              if(!x[key]){
                x[key]='--'
              }
           }
         })
        this.total = res.totalCount;
        this.tableData = res.data;
      });
    },
    view(e) {
      this.data = e;
      this.dialogVisible = true;
    },
    onDateTime(e) {
      if (e) {
        this.query.startdate = e[0];
        this.query.enddate = e[1];
      } else {
        this.query.startdate = "";
        this.query.enddate = "";
      }
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {},
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
.container {
  /deep/ .el-date-editor {
    width: 100% !important;
  }
  /deep/ .el-image {
    margin-right: 10px;
  }
}
</style>